<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/js/jquery-3.7.1.min.js"></script>
    <style>
        table {
            margin-top: 40px;
            width: 100%;
            border-collapse: collapse;
            border: 2px solid #333;
        }

        th,
        td {
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
            color: #333;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:nth-child(odd) {
            background-color: #a2cb89;
        }

        tbody tr:nth-child(odd) {
            background-color: #d9d9d9;
        }

        table thead tr td {
            font: 1.5em sans-serif;
        }

        table caption {
            font: 2em sans-serif;
        }
    </style>
</head>
<body>
    <div id="goodfeng">
        <!-- Content from the proxied URL will be displayed here -->
    </div>
    <div id="news">
        <table>
            <caption>海经贸媒体报道新闻列表</caption>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>日期</td>
                    <td>媒体</td>
                    <td>标题</td>
                </tr>
            </thead>
            <tbody id="students">
            </tbody>
        </table>
    </div>

    <script>
        // URL of the proxy server
        const proxyUrl = '/proxy?url=https://hceb.edu.cn/xwzx/mtjm.htm';

        let contents = new Array();
        let totalPage = 0;

        // Make a request to the proxy server
        fetch(proxyUrl)
            .then(response => response.text())
            .then(data => {
                // Display the content from the proxied URL
                $('#goodfeng').html(data);
                           

                $('div.m_new1 li').each(function() {
                    // 获取当前 <li> 元素内 <cite> 元素的文本内容
                    var citeText = $(this).find('cite').text();
                    
                    // 获取当前 <li> 元素内 <span> 元素的文本内容
                    var spanText = $(this).find('span').text();
                    var splitArray = spanText.split("】");
                    var media = splitArray[0].substring(1);
                    var title = splitArray[1];

                    // 获取当前 <li> 元素内 <span> 元素的文本内容
                    var linkText = $(this).find('a').attr('href');;
                    
                    // 输出获取到的文本内容
                    contents.push({'cite':citeText,'media':media,'title':title,'link':linkText})
                });

                let pageNum = $('.p_t').text();
                let totalNum = parseInt(pageNum.match(/\d+/)[0]);
                let liCount = $('div.m_new1 li').length;
                totalPage = Math.floor(totalNum / liCount); 
                showContents(totalPage,contents);
                       
            })
            .catch(error => console.error('Error:', error));

            async function showContents(totalPage,contents){
                let preurl = '/proxy?url=https://hceb.edu.cn/xwzx/mtjm/'

                for(var i=totalPage;i>0;i--){
                    let url = preurl+i+'.htm';
                    await getUrl(url,contents);
                } 

                listStudents(contents);
            }

            async function getUrl(url,contents){
                await fetch(url)
                .then(response => response.text())
                .then(data => {
                    // Display the content from the proxied URL
                    $('#goodfeng').html(data);

                    $('div.m_new1 li').each(function() {
                        // 获取当前 <li> 元素内 <cite> 元素的文本内容
                        var citeText = $(this).find('cite').text();
                        
                        // 获取当前 <li> 元素内 <span> 元素的文本内容
                        var spanText = $(this).find('span').text();
                        var splitArray = spanText.split("】");
                        var media = splitArray[0].substring(1);
                        var title = splitArray[1];
                        
                        // 获取当前 <li> 元素内 <span> 元素的文本内容
                        var linkText = $(this).find('a').attr('href');;
                        
                        // 输出获取到的文本内容
                        contents.push({'cite':citeText,'media':media,'title':title,'link':linkText})
                        
                    });
                    
                                
                })
                .catch(error => console.error('Error:', error)); 
            }

            $('#goodfeng').hide(); 

        function listStudents(students){
            let tbody = document.getElementById('students');
            tbody.innerHTML ='';
            for(let i=0;i<students.length;i++){
                let stu = students[i];
                tbody.innerHTML = tbody.innerHTML+'<tr><td>' + (i+1)+ '</td><td>' + stu.cite+'</td><td>' + stu.media+'</td><td><a href="'+stu.link+'">' + stu.title + '</a></td></tr>';
            }
        }

    </script>
</body>
</html>